<template>
  <el-container style="height: 100vh;">
    <!--左侧菜单-->
    <el-aside width="200px">
      <el-menu
              :unique-opened="true"
              :default-active="$route.path"
              background-color="rgba(16, 26, 28, 1)"
              text-color="#f2f2f2"
              active-text-color="#ffffff"
      >
        <template v-for="item in menus">
          <el-submenu :index="item.path" :key="item.path">
            <template slot="title">
              {{ item.title }}
            </template>
            <el-menu-item
                    v-for="child in item.child"
                    :key="child.title"
                    :index="`${item.path}${child.path}`"
                    @click="toPath(item, child)"
            >
              {{ child.title }}
            </el-menu-item>
          </el-submenu>
        </template>
      </el-menu>
    </el-aside>



    <el-container>
      <el-header class="nav">
        <!--头部-->
      </el-header>
      <el-main>
        <el-divider class="bg-gray">{{ title }}</el-divider>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      menus: [
        // 控制台
        {
          path: '/control',
          title: '控制台',
          child: [
                  { path: '/home', title: '首页' }
          ],
        },

        // 企业管理
        {
          path: '/enterprise-manage',
          title: '企业管理',
          child: [
            {
              path: '/company',
                title: '企业',
            },
            {
              path: '/comp',
              title: '记账公司',
            },
          ],
        },

        // 运营管理
        {
          path: '/operation-manage',
          title: '运营管理',
          child: [
            {
              path: '/indent',
              title: '订单管理',
            },
            {
              path: '/invoice',
              title: '发票管理',
            },
          ],
        },

        //  报表公式管理
        {
          path: '/bao-manage',
          title: '报表公式管理',
          child: [
            {
              path: '/balance',
              title: '资产负债表(企业)',
            },
            {
              path: '/balanced',
              title: '资产负债表(小企业)',
            },
            {
              path: '/profit',
              title: '利润表(企业)',
            },
            {
              path: '/profite',
              title: '利润表(小企业)',
            },
            {
              path: '/profited',
              title: '利润表(季报)',
            },
            {
              path: '/flow',
              title: '现金流量表',
            },
            {
              path: '/flowe',
              title: '现金流量表(季报)',
            },
            {
              path: '/state',
              title: '经营状况表',
            },
            {
              path: '/pay',
              title: '纳税统计表',
            },
            {
              path: '/formula',
              title: '计算公式表',
            },
          ],
        },

        //   系统设置
        {
          path: '/settings',
          title: '系统设置',
          child: [
            {
              path: '/voucher',
              title: '凭证引擎',
            },
            {
              path: '/subject',
              title: '科目设置',
            },
            {
              path: '/logger',
              title: '操作日志',
            },
            {
              path: '/purpose',
              title: '角色管理',
            },
          ],
        },

        // 门户管理
        {
          path: '/door',
          title: '门户管理',
          child: [
            {
              path: '/door',
              title: '门户管理',
            },
          ],
        },
      ],
    };
  },
  methods: {
    toPath(parent, child) {
      sessionStorage.setItem('title', child.title);
      this.$router.push(parent.path + child.path);
    },
  },
}
</script>

<style lang="scss">
  .el-aside {
    background-color: rgba(16, 26, 28, 1);
    .el-menu {
      border-right-width: 0;
      width: 100%;
    }
  }
</style>